<template>
  <div class="top">
    <!-- 面包屑导航 -->
    <el-breadcrumb :separator-icon="ArrowRight" style="height: 34px; line-height: 34px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>国内游</el-breadcrumb-item>
    </el-breadcrumb>
    <!--导航-->
    <el-radio-group v-model="type" @change="" fill="#EA1A56" class="dev">
<!--      <el-radio-button v-for="c in catTypeArr" :label="c.type">{{c.name}}</el-radio-button>-->
          <el-radio-button label="1">全部产品(237)</el-radio-button>
          <el-radio-button label="2" >跟团游(226)</el-radio-button>
          <el-radio-button label="3" >邮轮(12)</el-radio-button>
    </el-radio-group>

    <!--  产品分类  -->

    <div class="category-all">
      <!--   热门玩法     -->
      <div  style="font-size: 14px; line-height: 32px; display: flex;align-items: center;" >
        <div style="width: 110px;height: 36px; float: left;" ><el-icon><CaretTop /></el-icon> 热门玩法</div>
        <div style="width: 870px;height: 36px;float: left;">
          <ul>
            <li><a href="#">出境游</a></li>
            <li><a href="#">多国连线</a></li>
            <li><a href="#">全景旅游</a></li>
            <li><a href="#">俄罗斯</a></li>
            <li><a href="#">西班牙+葡萄牙</a></li>
            <li><a href="#">游学</a></li>
            <li><a href="#">澳大利亚</a></li>
            <li><a href="#">美国</a></li>
            <li><a href="#">日本</a></li>
            <li><a href="#">澳大利亚+新西兰</a></li>
            <li><a href="#">南美连线</a></li>
          </ul>
          </div>
        <div style="width: 110px; height: 36px; float: right;">
          <span><a href="">更多</a></span>
          <el-button style="float: right;" size="small">+多选</el-button>
        </div>
      </div>
      <!--   行程天数     -->
      <div  style="font-size: 14px; line-height: 32px; display: flex;align-items: center;" >
        <div style="width: 110px;height: 36px; float: left;" ><el-icon><PieChart /></el-icon> 行程天数</div>
        <div style="width: 870px;height: 36px;float: left;">
          <ul>
            <li><a href="#">2天</a></li>
            <li><a href="#">4天</a></li>
            <li><a href="#">5天</a></li>
            <li><a href="#">6天</a></li>
            <li><a href="#">7天</a></li>
            <li><a href="#">8天</a></li>
            <li><a href="#">9天</a></li>
            <li><a href="#">10天</a></li>
            <li><a href="#">11天</a></li>
            <li><a href="#">12天</a></li>
            <li><a href="#">13天</a></li>
            <li><a href="#">14天</a></li>
            <li><a href="#">15天</a></li>
            <li><a href="#">16天</a></li>
            <li><a href="#">17天</a></li>
            <li><a href="#">18天</a></li>
            <li><a href="#">19天</a></li>
          </ul>
        </div>
        <div style="width: 110px; height: 36px; float: right;">
          <span><a href="">更多</a></span>
          <el-button style="float: right;" size="small">+多选</el-button>
        </div>
      </div>
      <!--   出发日期     -->
      <div  style="font-size: 14px; line-height: 32px; display: flex;align-items: center;" >
        <div style="width: 110px;height: 36px; float: left; display: flex;align-items: center;" ><el-icon><Calendar /></el-icon>&nbsp;出发日期</div>
        <div style="width: 870px;height: 36px;float: left;display: flex;align-items: center;">
          <ul style="float: left; width: 530px;">
            <li><a href="#">3月</a></li>
            <li><a href="#">4月</a></li>
            <li><a href="#">5月</a></li>
            <li><a href="#">6月</a></li>
            <li><a href="#">7月</a></li>
            <li><a href="#">8月</a></li>
            <li><a href="#">9月</a></li>
            <li><a href="#">10月</a></li>
          </ul>
          <div >
              <div class="demo-date-picker" style=" display: flex;
        align-items: center; vertical-align: middle;">
                <div class="block">
                  <el-date-picker
                      class="date-input"
                      style="width: 125px;"
                      v-model="value1"
                      type="date"
                      placeholder=""
                      :size="'small'"
                  />
                </div>
                -
                <div class="block">
                  <el-date-picker
                      class="date-input"
                      style="width: 125px;"
                      v-model="value1"
                      type="date"
                      placeholder=""
                      :size="'small'"
                  />
                </div>
                <el-button style="margin-left: 10px;" size="small">确定</el-button>
              </div>
          </div>
        </div>
        <div style="width: 110px; height: 36px; float: left;display: flex;align-items: center;">
          <span><a href="">更多</a></span>
          <el-button style="margin-left: auto" size="small">+多选</el-button>
        </div>
      </div>
      <!--   出发城市     -->
      <div  style="font-size: 14px; line-height: 32px; display: flex;align-items: center;" >
        <div style="width: 110px;height: 36px; float: left;" ><el-icon><MapLocation /></el-icon> 出发城市</div>
        <div style="width: 870px;height: 36px;float: left;">
          <ul>
            <li><a href="#">北京</a></li>
            <li><a href="#">上海</a></li>
            <li><a href="#">广州</a></li>
            <li><a href="#">黑河</a></li>
            <li><a href="#">兰州</a></li>
            <li><a href="#">乌鲁木齐</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- 主体展示 -->
  <div class="main">
    <!--  产品筛选  -->
    <div class="main-top">
      <el-row :gutter="10">
        <el-col :span="16">
          <a href="#" class="left-list">默认</a>
          <a href="#" class="left-list">销量<el-icon><el-icon><Bottom /></el-icon></el-icon></a>
          <a href="#" class="left-list">价格<el-icon><DCaret /></el-icon></a>
          <a href="#" class="left-list">
            <el-checkbox></el-checkbox>&nbsp;
            众信直营
          </a>
          <a href="#" class="left-list">
            <el-checkbox></el-checkbox>&nbsp;
            只看优惠
          </a>
        </el-col>
        <el-col :span="8" style="padding-left: 90px;">
          <el-input
              class="input-price"
              v-model="input"
              style="width: 82px;height: 20px;font-size: 12px;"
              :formatter="(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="(value) => value.replace(/\￥\s?|(,*)/g, '')"
          />
          -
          <el-input
              class="input-price"
              v-model="input"
              style="width: 82px; height: 20px;font-size: 12px;"
              :formatter="(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="(value) => value.replace(/\￥\s?|(,*)/g, '')"
          />
          <el-button style="height: 22px; margin-left: 20px;font-size: 12px;">确定</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="main-left">
      <div class="main-left-item">
        <a href="#" class="product-item">
          <div class="imageWarp">
            <img src="https://img0.uzaicdn.com/ba/sightGallery/20180211151729578.jpg?imageView2/2/w/344/h/258/format/jpg/interlace/1" alt="">
          </div>
          <div class="content">
            <div class="main-left-item-info-c">
              <h2><一价全含 ** 666英国一地8晚10日>升级全程国际四星+大英讲解+巨石阵+温莎堡+爱丁堡+剑桥撑蒿+伦敦自由活动+比斯特购物村 </h2>
              <div class="main-left-item-info-start" >
                <b style="color: #EA1A56" ><el-icon><Location /></el-icon><span>北京出发</span></b>
                <b><span> | </span></b>
                <b style="color: #005bb4;"><span>众信自营</span></b>
              </div>
              <div class="main-left-item-info-date">
                <b><span>出发日期：</span>05/19   05/26   06/02   06/30   07/16   07/20   ...</b>
              </div>
              <div class="main-left-item-info-sale">
                <span>优惠</span>
                <span>早定优惠，立减1000元/人</span>
              </div>
            </div>
            <div class="main-left-item-info-r">
              <div class="price"><span>￥</span><b>25800</b> <span>起</span></div>
              <div class="sale"><i>省</i>1000元</div>
            </div>
          </div>
        </a>
        <a href="#" class="product-item">
          <div class="imageWarp">
            <img src="https://img0.uzaicdn.com/ba/sightGallery/20180211151729578.jpg?imageView2/2/w/344/h/258/format/jpg/interlace/1" alt="">
          </div>
          <div class="content">
            <div class="main-left-item-info-c">
              <h2><一价全含 ** 666英国一地8晚10日>升级全程国际四星+大英讲解+巨石阵+温莎堡+爱丁堡+剑桥撑蒿+伦敦自由活动+比斯特购物村 </h2>
              <div class="main-left-item-info-start" >
                <b style="color: #EA1A56" ><el-icon><Location /></el-icon><span>北京出发</span></b>
                <b><span> | </span></b>
                <b style="color: #005bb4;"><span>众信自营</span></b>
              </div>
              <div class="main-left-item-info-date">
                <b><span>出发日期：</span>05/19   05/26   06/02   06/30   07/16   07/20   ...</b>
              </div>
              <div class="main-left-item-info-sale">
                <span>优惠</span>
                <span>早定优惠，立减1000元/人</span>
              </div>
            </div>
            <div class="main-left-item-info-r">
              <div class="price"><span>￥</span><b>25800</b> <span>起</span></div>
              <div class="sale"><i>省</i>1000元</div>
            </div>
          </div>
        </a>
        <a href="#" class="product-item">
          <div class="imageWarp">
            <img src="https://img0.uzaicdn.com/ba/sightGallery/20180211151729578.jpg?imageView2/2/w/344/h/258/format/jpg/interlace/1" alt="">
          </div>
          <div class="content">
            <div class="main-left-item-info-c">
              <h2><一价全含 ** 666英国一地8晚10日>升级全程国际四星+大英讲解+巨石阵+温莎堡+爱丁堡+剑桥撑蒿+伦敦自由活动+比斯特购物村 </h2>
              <div class="main-left-item-info-start" >
                <b style="color: #EA1A56" ><el-icon><Location /></el-icon><span>北京出发</span></b>
                <b><span> | </span></b>
                <b style="color: #005bb4;"><span>众信自营</span></b>
              </div>
              <div class="main-left-item-info-date">
                <b><span>出发日期：</span>05/19   05/26   06/02   06/30   07/16   07/20   ...</b>
              </div>
              <div class="main-left-item-info-sale">
                <span>优惠</span>
                <span>早定优惠，立减1000元/人</span>
              </div>
            </div>
            <div class="main-left-item-info-r">
              <div class="price"><span>￥</span><b>25800</b> <span>起</span></div>
              <div class="sale"><i>省</i>1000元</div>
            </div>
          </div>
        </a>
        <a href="#" class="product-item">
          <div class="imageWarp">
            <img src="https://img0.uzaicdn.com/ba/sightGallery/20180211151729578.jpg?imageView2/2/w/344/h/258/format/jpg/interlace/1" alt="">
          </div>
          <div class="content">
            <div class="main-left-item-info-c">
              <h2><一价全含 ** 666英国一地8晚10日>升级全程国际四星+大英讲解+巨石阵+温莎堡+爱丁堡+剑桥撑蒿+伦敦自由活动+比斯特购物村 </h2>
              <div class="main-left-item-info-start" >
                <b style="color: #EA1A56" ><el-icon><Location /></el-icon><span>北京出发</span></b>
                <b><span> | </span></b>
                <b style="color: #005bb4;"><span>众信自营</span></b>
              </div>
              <div class="main-left-item-info-date">
                <b><span>出发日期：</span>05/19   05/26   06/02   06/30   07/16   07/20   ...</b>
              </div>
              <div class="main-left-item-info-sale">
                <span>优惠</span>
                <span>早定优惠，立减1000元/人</span>
              </div>
            </div>
            <div class="main-left-item-info-r">
              <div class="price"><span>￥</span><b>25800</b> <span>起</span></div>
              <div class="sale"><i>省</i>1000元</div>
            </div>
          </div>
        </a>
        <a href="#" class="product-item">
          <div class="imageWarp">
            <img src="https://img0.uzaicdn.com/ba/sightGallery/20180211151729578.jpg?imageView2/2/w/344/h/258/format/jpg/interlace/1" alt="">
          </div>
          <div class="content">
            <div class="main-left-item-info-c">
              <h2><一价全含 ** 666英国一地8晚10日>升级全程国际四星+大英讲解+巨石阵+温莎堡+爱丁堡+剑桥撑蒿+伦敦自由活动+比斯特购物村 </h2>
              <div class="main-left-item-info-start" >
                <b style="color: #EA1A56" ><el-icon><Location /></el-icon><span>北京出发</span></b>
                <b><span> | </span></b>
                <b style="color: #005bb4;"><span>众信自营</span></b>
              </div>
              <div class="main-left-item-info-date">
                <b><span>出发日期：</span>05/19   05/26   06/02   06/30   07/16   07/20   ...</b>
              </div>
              <div class="main-left-item-info-sale">
                <span>优惠</span>
                <span>早定优惠，立减1000元/人</span>
              </div>
            </div>
            <div class="main-left-item-info-r">
              <div class="price"><span>￥</span><b>25800</b> <span>起</span></div>
              <div class="sale"><i>省</i>1000元</div>
            </div>
          </div>
        </a>
        <a href="#" class="product-item">
          <div class="imageWarp">
            <img src="https://img0.uzaicdn.com/ba/sightGallery/20180211151729578.jpg?imageView2/2/w/344/h/258/format/jpg/interlace/1" alt="">
          </div>
          <div class="content">
            <div class="main-left-item-info-c">
              <h2><一价全含 ** 666英国一地8晚10日>升级全程国际四星+大英讲解+巨石阵+温莎堡+爱丁堡+剑桥撑蒿+伦敦自由活动+比斯特购物村 </h2>
              <div class="main-left-item-info-start" >
                <b style="color: #EA1A56" ><el-icon><Location /></el-icon><span>北京出发</span></b>
                <b><span> | </span></b>
                <b style="color: #005bb4;"><span>众信自营</span></b>
              </div>
              <div class="main-left-item-info-date">
                <b><span>出发日期：</span>05/19   05/26   06/02   06/30   07/16   07/20   ...</b>
              </div>
              <div class="main-left-item-info-sale">
                <span>优惠</span>
                <span>早定优惠，立减1000元/人</span>
              </div>
            </div>
            <div class="main-left-item-info-r">
              <div class="price"><span>￥</span><b>25800</b> <span>起</span></div>
              <div class="sale"><i>省</i>1000元</div>
            </div>
          </div>
        </a>
        <a href="#" class="product-item">
          <div class="imageWarp">
            <img src="https://img0.uzaicdn.com/ba/sightGallery/20180211151729578.jpg?imageView2/2/w/344/h/258/format/jpg/interlace/1" alt="">
          </div>
          <div class="content">
            <div class="main-left-item-info-c">
              <h2><一价全含 ** 666英国一地8晚10日>升级全程国际四星+大英讲解+巨石阵+温莎堡+爱丁堡+剑桥撑蒿+伦敦自由活动+比斯特购物村 </h2>
              <div class="main-left-item-info-start" >
                <b style="color: #EA1A56" ><el-icon><Location /></el-icon><span>北京出发</span></b>
                <b><span> | </span></b>
                <b style="color: #005bb4;"><span>众信自营</span></b>
              </div>
              <div class="main-left-item-info-date">
                <b><span>出发日期：</span>05/19   05/26   06/02   06/30   07/16   07/20   ...</b>
              </div>
              <div class="main-left-item-info-sale">
                <span>优惠</span>
                <span>早定优惠，立减1000元/人</span>
              </div>
            </div>
            <div class="main-left-item-info-r">
              <div class="price"><span>￥</span><b>25800</b> <span>起</span></div>
              <div class="sale"><i>省</i>1000元</div>
            </div>
          </div>
        </a>
        <a href="#" class="product-item">
          <div class="imageWarp">
            <img src="https://img0.uzaicdn.com/ba/sightGallery/20180211151729578.jpg?imageView2/2/w/344/h/258/format/jpg/interlace/1" alt="">
          </div>
          <div class="content">
            <div class="main-left-item-info-c">
              <h2><一价全含 ** 666英国一地8晚10日>升级全程国际四星+大英讲解+巨石阵+温莎堡+爱丁堡+剑桥撑蒿+伦敦自由活动+比斯特购物村 </h2>
              <div class="main-left-item-info-start" >
                <b style="color: #EA1A56" ><el-icon><Location /></el-icon><span>北京出发</span></b>
                <b><span> | </span></b>
                <b style="color: #005bb4;"><span>众信自营</span></b>
              </div>
              <div class="main-left-item-info-date">
                <b><span>出发日期：</span>05/19   05/26   06/02   06/30   07/16   07/20   ...</b>
              </div>
              <div class="main-left-item-info-sale">
                <span>优惠</span>
                <span>早定优惠，立减1000元/人</span>
              </div>
            </div>
            <div class="main-left-item-info-r">
              <div class="price"><span>￥</span><b>25800</b> <span>起</span></div>
              <div class="sale"><i>省</i>1000元</div>
            </div>
          </div>
        </a>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <a href="#" class="page-link first-page">首页</a>
        <a href="#" class="page-link prev-page">上一页</a>

        <!-- 显示当前页数范围内的页码 -->
        <span class="dots">...</span>
        <a href="#" class="page-link active">1</a>
        <a href="#" class="page-link">2</a>
        <a href="#" class="page-link">3</a>
        <a href="#" class="page-link">4</a>
        <a href="#" class="page-link">5</a>
        <a href="#" class="page-link">6</a>
        <a href="#" class="page-link">7</a>
        <a href="#" class="page-link">8</a>
        <a href="#" class="page-link">9</a>
        <a href="#" class="page-link">10</a>
        <a href="#" class="page-link">11</a>
        <span class="dots">...</span>

        <a href="#" class="page-link next-page">下一页</a>
        <a href="#" class="page-link last-page">末页</a>
      </div>

    </div>
    <!--  特惠产品  -->
    <div class="main-right" style="padding: 0;">
      <div class="main-right-top">
        <div class="main-right-top-title" style="font-size: 18px; line-height: 24px;margin-bottom: 10px; display: flex;
    align-items: center;">
          <span style="color: #ee811f;font-size: 22px; margin-right: 5px;"><el-icon><PriceTag /></el-icon></span>
          <span>特惠产品</span>
        </div>
        <div class="main-right-item" >
          <a href="">
            <div class="main-right-item-box" >
              <img style="width: 210px;" src="https://img1.uzaicdn.com/ba/sightGallery/20180222152337135.jpg?imageView2/2/w/550/h/413/format/jpg/interlace/1" alt="">
              <div class="main-right-item-info">
                <div style="font-size: 14px;"> 俄罗斯贝加尔湖奥利洪岛6日</div>
                <div class="main-right-item-allPrice">
                  <del><span>￥</span><b>25800</b></del>
                  <div class="price"><span>￥</span><b>25800</b> <span>起</span></div>
                </div>
                <div class="main-right-item-buy">
                  立即抢购
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="main-right-item" >
          <a href="">
            <div class="main-right-item-box" >
              <img style="width: 210px;" src="https://img1.uzaicdn.com/ba/sightGallery/20180222152337135.jpg?imageView2/2/w/550/h/413/format/jpg/interlace/1" alt="">
              <div class="main-right-item-info">
                <div style="font-size: 14px;"> 俄罗斯贝加尔湖奥利洪岛6日</div>
                <div class="main-right-item-allPrice">
                  <del><span>￥</span><b>25800</b></del>
                  <div class="price"><span>￥</span><b>25800</b> <span>起</span></div>
                </div>
                <div class="main-right-item-buy">
                  立即抢购
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="main-right-item" >
          <a href="">
            <div class="main-right-item-box" >
              <img style="width: 210px;" src="https://img1.uzaicdn.com/ba/sightGallery/20180222152337135.jpg?imageView2/2/w/550/h/413/format/jpg/interlace/1" alt="">
              <div class="main-right-item-info">
                <div style="font-size: 14px;"> 俄罗斯贝加尔湖奥利洪岛6日</div>
                <div class="main-right-item-allPrice">
                  <del><span>￥</span><b>25800</b></del>
                  <div class="price"><span>￥</span><b>25800</b> <span>起</span></div>
                </div>
                <div class="main-right-item-buy">
                  立即抢购
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="main-right-item">
          <a href="">
            <img src="https://img7.uzaicdn.com/uz/advertisement/ATT0001529749.jpg?imageView2/1/w/210/h/260/format/jpg" alt="">
          </a>
        </div>
        <div class="main-right-item">
          <a href="">
            <img src="https://img7.uzaicdn.com/uz/advertisement/ATT0001552571.jpg?imageView2/1/w/210/h/260/format/jpg" alt="">
          </a>
        </div>
      </div>
    </div>



  </div>




</template>


<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import {ref} from "vue";

const type = ref('1');
</script>

<style>
/* 导航标签样式*/
.dev{
  width: 1140px;
  border-bottom:1px dashed rgba(234, 26, 86, 0.23);
}
.dev .el-radio-button:hover .el-radio-button__inner{
  color: #666666;
}

.category-all .el-button:hover{
  color: #666666;
  background: #ffffff;

}
.category-all .el-button:active{
  border-color: #ffffff;
  color: #666666;
  background: #ffffff;
}
.main-top .el-button:hover
{
  color: #666666;
  background: #ffffff;
}
.main-top .el-button:active
{
  color: #666666;
  background: #ffffff;
}
</style>

<style scoped>
/*初始化样式*/
img{
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
a{
  color: inherit; /* 使用父元素的颜色，移除默认颜色 */
  text-decoration: none; /* 移除下划线 */
  outline: none; /* 移除轮廓线（可选，视具体需求） */
}
ul,li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li{
  display: inline;
  padding: 0 5px;
}



/*主题展示样式*/
.top,.main {
  margin-top: 20px;
  width: 1140px;
}
.main {
  height: 1500px;
}
.main-top{
  height: 40px;
  background-color: #f8f8f8;
  line-height: 40px;
  padding: 0 20px;
  margin-bottom: 20px;
}
.left-list{
  float: left;
  margin-right: 40px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.el-input__inner {
  border-radius: 10px !important;
}



/*类别样式*/
.category-all {
  padding: 15px 20px 0;
}


/*日期格式样式*/
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  line-height:40px;
}

.demo-date-picker .block >.date-input{
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}


.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/*商品item展示样式*/
.main-left{
  width: 905px;
  float: left;
}
.main-right{
  width: 210px;
  float: right;
}
.main-left-item>a{
  margin-bottom: 15px;
  width: 905px;
  height: 161px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.main-left-item>a:hover{
  background: #fff4f7;
}

.main-left-item>a>.imageWarp{
  width: 172px;
  float: left;
  margin: auto;
}
.main-left-item>a>.imageWarp>img{
  width: 172px;
  height: 129px;
  display: block;
}
.main-left-item>a>.content{
  width: 710px;
  float: left;
  padding-left: 15px;
  border-bottom: 1px dashed gainsboro;
}

.main-left-item>a>.content>.main-left-item-info-c{
  width: 520px;
  float: left;
}
.main-left-item>a>.content>.main-left-item-info-c>h2{
  font-size: 16px;
}
.main-left-item-info-start{
  font-size: 12px;
  margin-bottom: 6px;
}
.main-left-item-info-date {
  font-size: 12px;
  margin-bottom: 6px;
}
.main-left-item-info-sale{
  font-size: 12px;
}


.main-left-item>a>.content>.main-left-item-info-r {
  width: 190px;
  height: 140px;
  float: right;
  text-align: center;
}
.main-left-item>a>.content>.main-left-item-info-r .price {
  margin-top: 45px;

}
.main-left-item>a>.content>.main-left-item-info-r>.sale {
  margin-top: 10px;
}
.main-left-item>a>.content>.main-left-item-info-r>.sale i{
  display: inline;
  color: #fff;
  font-size: 12px;
  background: #83be51;
  background: -webkit-linear-gradient(30deg, #48aa3b, #87c22c);
  background: -o-linear-gradient(30deg, #48aa3b, #87c22c);
  background: linear-gradient(30deg, #48aa3b, #87c22c);
  padding: 0 3px 1px;
  border-radius: 2px;
  font-style: normal;
  margin-right: 2px;
  vertical-align: 2px
}


/*分页样式*/
.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  font-size: 14px;
}

.page-link {
  cursor: pointer;
  margin: 0 5px;
  text-decoration: none;


  text-align: center; /* 使文本居中 */


  /* 添加如下样式模拟按钮效果 */
  border: 1px solid #ddd; /* 边框颜色和宽度 */
  border-radius: 4px; /* 边框圆角 */
  padding: 5px 10px; /* 内边距以增加触感 */
  background-color: white; /* 背景色 */
  transition: background-color 0.3s ease; /* 添加平滑过渡效果 */

  /* 可选：设置hover和active状态样式 */
  &:hover {
    background-color: #f2f2f2; /* 鼠标悬停背景色 */
  }

  &.active {
    background-color: #EA1A56; /* 当前选中页背景色 */
    color: white; /* 当前选中页文字颜色 */
  }
}

.dots {
  margin: 0 5px;
  /* 若希望省略号与其他页码保持一致的外观，可以将以下样式移至.page-link */
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  background-color: white;
  transition: background-color 0.3s ease;
}











/*特惠产品*/
.main-right-item {
  margin-bottom: 15px;
  overflow: hidden;
}
.main-right-item-img{
  margin-bottom: 15px;
  overflow: hidden;
}
.main-right-item-info{
  padding: 8px;
}
.main-right-item-allPrice{
  float: left;
}
.main-right-item-allPrice>del {
  font-size: 12px;
  display: block;
  line-height: 12px;
  padding-top: 8px;
  padding-left: 2px;
  padding-bottom: 4px;
  color: #999;
  text-decoration: line-through;
  height: 8px;
}
.main-right-item-allPrice .price{
  color: #EA1A56;
}
.main-right-item-buy {
  float: right;
  width: 80px;
  height: 24px;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  line-height: 24px;
  background: #ee811f;
  font-size: 13px;
  margin-top: 8px;
}
</style>